<template>
  <div class="song-sheet pdtb-10 pd-lr30">
    <el-skeleton :loading="loading" animated>
      <template #template>
        <div class="header d-flex">
          <el-skeleton-item variant="image" style="width: 250px; height: 200px" />
          <div style="width: 100%" class="d-flex flex-column j-sb pd-lr20 pd-tb7">
            <el-skeleton-item v-for="item in 3" :key="item" variant="p" style="height: 15%" />
          </div>
        </div>
        <div class="oper d-flex j-end pd-20">
          <el-skeleton-item variant="p" style="width: 10%" />
        </div>
        <div class="pd-lr10">
          <el-skeleton-item
            v-for="item in 5"
            :key="item"
            variant="p"
            style="height: 40px; margin-bottom: 10px"
          />
        </div>
      </template>
      <template #default>
        <div class="header d-flex">
          <img
            class="cover mr-r20"
            src="http://shp.qpic.cn/ishow/2735081417/1565774311_84828260_3934_sProdImgNo_8.jpg/0"
          />
          <div class="info flex-1 d-flex flex-column">
            <div class="d-flex j-sb a-center">
              <div class="font-40 text-weight">{{ name }}</div>
              <div class="edit pointer d-flex a-center">
                <el-icon size="19px"><Edit /></el-icon>
                <div class="pd-l5">编辑</div>
              </div>
            </div>
            <div class="flex-1 pd-t20">用户名</div>
            <div>
              <play-all />
              <batch-operation />
            </div>
          </div>
        </div>
        <div class="oper d-flex j-end pd-tb10">
          <div class="d-flex a-center pointer pd-tb5 pd-lr10">
            <el-icon size="19px"><Search /></el-icon>
            <div class="pd-l3">搜索</div>
          </div>
          <div class="d-flex a-center pointer pd-tb5 pd-lr10">
            <el-icon size="19px"><Operation /></el-icon>
            <div class="pd-l3">排序</div>
          </div>
        </div>
        <div class="pd-lr10">
          <song-list :list="songData" :sheetId="props.id" />
        </div>
      </template>
    </el-skeleton>
  </div>
</template>

<script setup lang="ts">
  import { ref, provide } from 'vue'
  import { getSheetSong } from '@/api/sheet'
  import { Edit } from '@element-plus/icons-vue'
  import playAll from '../components/play-all.vue'
  import batchOperation from '../components/batch-operation.vue'
  import songList from '../components/songList.vue'

  // eslint-disable-next-line no-undef
  defineOptions({
    name: 'songSheet'
  })
  const props = defineProps<{
    name: string
    id: number
  }>()
  provide('sheetId', props.id)

  const loading = ref(true)
  const songData = ref<any>(null)

  getSheetSong(props.id).then(res => {
    songData.value = res
    loading.value = false
  })
</script>

<style lang="scss" scoped>
  .song-sheet {
    height: 100%;
    .header {
      height: 200px;
      .cover {
        width: 200px;
        height: 200px;
        border-radius: 10px;
      }
      .info {
        .edit:hover {
          color: $musicColor;
        }
      }
    }
    .oper {
      & > div {
        border-radius: 5px;
        &:hover {
          background-color: rgb(240, 240, 240);
        }
      }
    }
  }
</style>
